<style lang="scss" scoped>
    .cart-item-container {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px;
        // box-shadow: 0 1px 0 rgba(0,0,0,.05),0 .5px 0 rgba(0,0,0,.09);

        > div {
            display: inline-block;
        }

        .choose {
            padding: 12px;
            $circle-rect: 20px;

            .circle {
                width: $circle-rect;
                height: $circle-rect;
                background: url('../../assets/circle.png') no-repeat;
                background-size: $circle-rect;
            }

            .choosed {
                background: url('../../assets/circle-choosed.png') no-repeat;
                background-size: $circle-rect;
            }
        }

        .img {
            border: 2px solid #ddd;
            background-color: #fff;
            border-radius: 4px;
            height: 88px;
            min-width: 88px;
            // width: 100px;
            max-width: 88px;
            display: flex;
            align-items: center;

            img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .info {
            width: 60%;
            padding: 0 1em;
            word-break: break-all;
            display: flex;
            justify-content: space-between;;
            flex-direction: column;

            > p, div {
                display: block;
            }

            .title {
                max-height: 40px;
                overflow: hidden;
            }

            .variant {
                padding-top: 5px;
                max-height: 40px;
                color: #888;
                overflow: hidden;
            }

            .number {
                padding-top: 10px;
                display: flex;
                justify-content: space-between;

                .quantity {
                    margin-right: 12px;
                }
            }

            .div, p {
                display: inline-block;
            }
        }

    }

    .buttons {
        height: 100%;

        .order {
            height: 100%;
            font-size: 15px;
            width: 4em;
            border: 0;
            color: #fff;
            background-color: #f44336;
        }
    }
</style>

<template>
    <div>
        <swiper-left>
            <div class="cart-item-container">
                <div class="choose">
                    <div
                     class="circle"
                     :class="{choosed: cart.choose}"
                     @click="do_choose" >
                    </div>
                </div>

                <div class="img" v-link="{path: '/product/' + cart.template_id}">
                    <img :src="product_img" />
                </div>

                <div class="info">
                    <p class="title">{{ cart.name }}</p>
                    <p class="variant">{{ cart.variant }}</p>

                    <div class="number">
                        <price :price="cart.price_unit"></price>
                        <div class="quantity">
                            <m-number :value.sync="cart.product_uom_qty" :min="1" ></m-number>
                        </div>
                    </div>
                </div>
            </div>

            <div class="buttons" slot="right">
                <button class="order" @click.prevent.stop="do_delete">删除</button>
            </div>
        </swiper-left>
    </div>
</template>

<script>
    import MNumber from "util-components/m-number.vue"
    import SwiperLeft from "util-components/swiper-left"
    import Price from "util-components/price.vue"

    import getters from '../../vuex/getters'
    import ShopType from '../../shop-type'

    export default {
        props: ['cart'],
        events: {
            'do_all_choose': function(toggle=false) {
                this.$broadcast('toggle-display', toggle);
            },
            'update-qty': function() {
                this.$dispatch('change-qty', this.cart.id, this.cart.product_uom_qty);
            },
        },
        computed: {
            product_img () {
                return `/website/image/product.product/${this.cart.product_id}/image`;
            }
        },
        components: {
            MNumber,
            SwiperLeft,
            Price
        },
        methods: {
            do_choose () {
                this.cart.choose = !this.cart.choose;

                this.$dispatch('do-choose');
            },
            do_delete () {
                this.cart.delete = true;
                this.$dispatch('do-delete', this.cart.id);
            }
        }
    }
</script>
